<!--  -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="handleSearch">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      group="CreateMaskCase"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
      >
      <a-row :gutter="[16,0]"  style="flex:1">
        <a-col :span="6">
          <a-form-item :label="$t('T9_shopId')" name="shopId">
          <a-select v-model:value="queryForm.shopId"  :placeholder="$t('common_pleaseSelect')">
           <a-select-option v-for="item in options.shopIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_productVer')" name="productVer">
          <a-select v-model:value="queryForm.productVer"  allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.eqpIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_productType')" name="productType">
          <a-select v-model:value="queryForm.productType"  allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.positionGroupList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
        <a-col :span="6"></a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_productId')" name="productId">
          <a-select v-model:value="queryForm.productId"  allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.positionGroupList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_ownerType')" name="ownerType">
          <a-select v-model:value="queryForm.ownerType"  allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.ownerTypeList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_owner')" name="owner">
          <a-select v-model:value="queryForm.owner"  allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.positionGroupList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
        <a-col :span="6"></a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_batch')" name="batch">
          <a-select v-model:value="queryForm.batch"  allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.positionGroupList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_floor')" name="floor">
          <a-select v-model:value="queryForm.floor"  allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.positionGroupList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_operation')" name="operation">
          <a-select v-model:value="queryForm.operation"  allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.positionGroupList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <div class="data-form">
      <a-form
          ref="form"
          layout="inline"
          :colon="false"
          :model="form"
        >
        <a-row :gutter="[16,0]"  style="flex:1">
          <a-col :span="6">
         <a-form-item :label="$t('T9_totalCst')" name="totalCst">
           <a-input v-model:value="form.totalCst" :disabled="true" />
          </a-form-item>
          </a-col>
          <a-col :span="6">
             <a-form-item :label="$t('T9_totalGlass')" name="totalGlass">
            <a-input v-model:value="form.totalGlass" :disabled="true" />
          </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item :label="$t('T9_totalOwner')" name="detect">
            <a-input v-model:value="form.totalOwner" :disabled="true" />
          </a-form-item>
          </a-col>
        </a-row>
        </a-form>
    </div>
    <div class="page-wrap-main">
      <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-1">
        <a-col :span="15" class="global-oper-row-title">{{ $t('T9_cstList') }}</a-col>
        <a-col :span="8" class="global-oper-row-extra">
          <a-button>{{ $t('T9_toExcel') }}</a-button>
        </a-col>
      </a-row>
      <div class="page-wrap-main-table">
        <t-table
          :data="list.tableData"
          max-height="100%"
          :loading="searchBtnLoading"
          @radio-change="handleCheckChange"
        >
          <t-column type="radio" width="50"></t-column>
          <t-column field="lastComment" :title="$t('T9_lastComment')" />
          <t-column field="cstId" :title="$t('T9_cstId')" />
          <t-column field="productId" :title="$t('T9_productId')" />
          <t-column field="owner" :title="$t('T9_owner')" />
          <t-column field="productSpecVer" :title="$t('T9_productSpecVer')" />
          <t-column field="operation" :title="$t('T9_operation')" />
          <t-column field="desc" :title="$t('T9_desc')" />
          <t-column field="glassQty" :title="$t('T9_glassQty')" />
          <t-column field="maxStayHour" :title="$t('T9_maxStayHour')" />
          <t-column field="minqtime" :title="$t('T9_minqtime')" />
          <t-column field="beforeEqId" :title="$t('T9_beforeEqId')" />
          <t-column field="transferState" :title="$t('T9_transferState')" />
          <t-column field="cstLocation" :title="$t('T9_cstLocation')" />
          <t-column field="floor" :title="$t('T9_floor')" />
          <t-column field="sheetId" :title="$t('T9_sheetId')" />
          <t-column field="futureSheetQty" :title="$t('T9_futureSheetQty')" />
          <t-column field="dspFlag" :title="$t('T9_dspFlag')" />
          <t-column field="panelQty" :title="$t('T9_panelQty')" />
          <t-column field="holdState" :title="$t('T9_holdState')" />
          <t-column field="rtsFlag" :title="$t('T9_rtsFlag')" />
          <t-column field="batch" :title="$t('T9_batch')" />
          <t-column field="processState" :title="$t('T9_processState')" />
          <t-column field="route" :title="$t('T9_route')" />
          <t-column field="ownerType" :title="$t('T9_ownerType')" />
          <t-column field="preRoute" :title="$t('T9_preRoute')" />
          <t-column field="preOperation" :title="$t('T9_preOperation')" />
          <t-column field="hostMachineRecipeName" :title="$t('T9_hostMachineRecipeName')" />
          <t-column field="portId" :title="$t('T9_portId')" />
          <t-column field="timeUsed" :title="$t('T9_timeUsed')" />
          <t-column field="groupId" :title="$t('T9_groupId')" />
          <t-column field="productType" :title="$t('T9_productType')" />
          <t-column field="department" :title="$t('T9_department')" />
          <t-column field="priority" :title="$t('T9_priority')" />
          <t-column field="reservedEqId" :title="$t('T9_reservedEqId')" />
          <t-column field="reworkState" :title="$t('T9_reworkState')" />
          <t-column field="createTime" :title="$t('T9_createTime')" />
          <t-column field="needReworkCount" :title="$t('T9_needReworkCount')" />
          <t-column field="increaseConfirmationSheetName" :title="$t('T9_increaseConfirmationSheetName')" />
          <t-column field="inlineReworkCount" :title="$t('T9_inlineReworkCount')" />
        </t-table>
      </div>
      <div class='data-form page-wrap-main-bottom mt-1'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules2"
        >
        <a-row :gutter="[16,0]"  style="flex:1">
          <a-col :span="6">
            <a-form-item :label="$t('T9_detect')" name="detect">
            <a-select v-model:value="dataForm.detect" allow-clear  >
              <a-select-option v-for="item in options.newPrTypeList"
              :key="item.newPrType" :value="item.newPrType" :prdesc="item.desc">
              {{item.newPrType}}
              </a-select-option>
            </a-select>
          </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item :label="$t('T9_hold')" name="hold">
            <a-select v-model:value="dataForm.hold" allow-clear >
              <a-select-option v-for="item in options.newPrTypeList"
              :key="item.newPrType" :value="item.newPrType" :prdesc="item.desc">
              {{item.newPrType}}
              </a-select-option>
            </a-select>
          </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item :label="$t('T9_glassInfoChange')" name="glassInfoChange">
            <a-select v-model:value="dataForm.glassInfoChange" allow-clear >
              <a-select-option v-for="item in options.newPrTypeList"
              :key="item.newPrType" :value="item.newPrType" :prdesc="item.desc">
              {{item.newPrType}}
              </a-select-option>
            </a-select>
          </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item :label="$t('T9_abnormalForm')" name="abnormalForm">
            <a-select v-model:value="dataForm.abnormalForm" allow-clear >
              <a-select-option v-for="item in options.newPrTypeList"
              :key="item.newPrType" :value="item.newPrType" :prdesc="item.desc">
              {{item.newPrType}}
              </a-select-option>
            </a-select>
          </a-form-item>
          </a-col>
        </a-row>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
  import { shopIdList } from '@/views/options'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  export default {
    name: 'CreateMaskCase',
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        list: {
          tableData: []
        },
        form: {
          totalCst: '',
          totalGlass: '',
          totalOwner: ''
        },
        queryForm: {
          shopId: 'ARRAY',
          productVer: '',
          productType: '',
          productId: '',
          ownerType: '',
          owner: '',
          batch: '',
          floor: '',
          operation: ''
        },
        options: {
          shopIdList
        },
        dataForm: {
          detect: '',
          hold: '',
          glassInfoChange: '',
          abnormalForm: ''
        },
        rules: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        }
      }
    },
    computed: {},
    created() {
      this.initOptions([{ name: 'ownerType' }])
    },
    watch: {
      'queryForm.shopId': {
        handler(shopId) {
          this.initOptions([{ name: 'ownerType', params: { shopId, bayId: '', version: '80024' } }])
        }
      },
      'queryForm.productType': {
        handler(productType) {
          this.initOptions([{ name: 'productId', params: { shopId: this.queryForm.shopId, productType } }])
        }
      },
      'queryForm.ownerType': {
        handler(ownerType) {
          this.initOptions([{ name: 'productId', params: { ownerType } }])
        }
      }
    },
    methods: {
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const basicParams = {
              queryId: 'GetMachinePRTypeList',
              version: '80007',
              dtoName: 'PrTypeListDTO',
              menuName: 'changeMachinePrType',
              usage: 'getPrTypeList'
            }
            api
              .getList({ ...this.queryForm, ...basicParams })
              .then((res) => {
                this.searchBtnLoading = false
                this.list.tableData = res || []
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      }
    }
  }
</script>
<style lang='less' scoped>
</style>
